<template>
	<view v-if="showPopup" class="uni-popup">
		<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" />
		<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper" @click="close(true)">
			<view class="uni-popup__wrapper-box" @click.stop="clear">
				<view class="gift-wrap">
					<view class="header-wrap">
						<view class="intro">
							<text class="strong">送给</text>
							<image class="avatar" :src="giftData.toInfo.avatar" mode=""></image>
							<text class="strong">{{giftData.toInfo.name}}</text>
						</view>
						<view class="menu" @click="openUserHome">
							<text class="menu-data">资料卡</text>
						</view>
					</view>
					<view class="main-wrap">
						<scroll-view class="gift-scroll-wrap" scroll-y="true">
							<view class="gift-list">
								<view :class="['gift-item', giftIndex == index ? 'active' : '']" v-for="(item, index) in giftData.list" :key="index" @click="selectGift(index,item)">
									<image class="gift-icon" :src="item.file" mode=""></image>
									<view class="gift-info">
										<text class="gift-name">{{item.name}}</text>
										<text class="gift-price">{{item.rose}}米币</text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="footer-wrap">
						<view class="balance-info">
							<text class="balance">{{giftData.userInfo.rose}}米币</text>
							<text class="recharge-btn" @click="recharge">充值</text>
						</view>
						<view class="btn-wrap">
							<button class="giveGift-btn" type="warn" size="mini" @click="giveGift">赠送</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'GiveGiftPopup',
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			type: {
				type: String,
				default: 'bottom'
			},
			// 是否开启自定义
			custom: {
				type: Boolean,
				default: true
			},
			// maskClick
			maskClick: {
				type: Boolean,
				default: true
			},
			show: {
				type: Boolean,
				default: true
			},
			// innerAudioContext: {
			// 	type: Object,
			// 	default(){}
			// },
			domain: {
				type: String,
				default: ''
			},
			
			giftData: {
				type: Object,
				default() {
					return {
						toInfo: {
							id: '',
							name: '',
							avatar: '',
						},
						userInfo: {
							id: '',
							name: '',
							avatar: '',
							rose: 0
						},
						rid: '0',
						list: []
					};
				}
			}
		},
		data() {
			return {
				ani: '',
				showPopup: false,
				userInfo: {},
				giftIndex: 0,
				innerAudioContext:{}
			}
		},
		watch: {
			show(newValue) {
				if (newValue) {
					this.open()
				} else {
					this.close()
				}
			}
		},
		created() {
			
			try {
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.userInfo = myInfo;
				}
			} catch (e) {
				console.log(e)
			}
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = true;

		},
		
		methods: {
			clear() {},
			open() {
				this.$emit('change', {
					show: true
				})
				this.showPopup = true
				this.$nextTick(() => {
					setTimeout(() => {
						this.ani = 'uni-' + this.type
					}, 30)
				})
			},
			close(type) {
				if (!this.maskClick && type) return
				this.$emit('change', {
					show: false
				})
				// 关闭音频
				this.innerAudioContext.src = this.domain + null;
				this.innerAudioContext.onPlay(() => {
				});
				
				this.ani = ''
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPopup = false;
						
					}, 300)
				})
			},
			openUserHome() {
				let toInfo = {
					id: this.giftData.toInfo.id,
					name: this.giftData.toInfo.name,
					avatar:this.giftData.toInfo.avatar,
				}
				uni.navigateTo({
					url: '/pages/home/user_home?user=' + JSON.stringify(toInfo)
				})
			},
			recharge() {
				let userinfo = {
					id: this.userInfo.id,
					token: this.userInfo.token,
					rose: this.userInfo.rose
				}
				uni.navigateTo({
					url: '/pages/my/rose?userinfo=' + JSON.stringify(userinfo)
				});
			},
			selectGift(index,item) {
				this.giftIndex = index;
				
			},
			giveGift() {
				uni.showLoading({
					title: ''
				});
				// 赠送时播放音效
				this.innerAudioContext.src = this.domain+ null;
				
				this.innerAudioContext.src = this.domain+ this.giftData.list[this.giftIndex].music;
				this.innerAudioContext.onPlay(() => {});
				
				this.$api.api.ajaxData({
					method: 'V1.GiveGifts',
					uid: this.userInfo.id,
					token: this.userInfo.token,
					touid: this.giftData.toInfo.id,
					rid: this.giftData.rid,
					gid: this.giftData.list[this.giftIndex].id,
					liveid: '0',
					minute: 0
				}, res => {
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						position: 'bottom',
						icon: 'none',
					});
					if (res.status) {
						
						let temp_ext = {
							fromId: this.userInfo.id,
							fromName: this.userInfo.name,
							fromAvatar: this.userInfo.avatar,
							toId: this.giftData.toInfo.id,
							toName: this.giftData.toInfo.name,
							toAvatar: this.giftData.toInfo.avatar,
							url: this.giftData.list[this.giftIndex].file,
							giftName: this.giftData.list[this.giftIndex].name,
							count: 1
						};
						let message = this.$tim.createCustomMessage({
							to: this.IDBEFORE + this.giftData.toInfo.id,
							conversationType: this.TIM.TYPES.CONV_C2C,
							payload: {
								data: 'gift',
								description: '礼物',
								extension: JSON.stringify(temp_ext)
							}
						});
						this.$tim.sendMessage(message).then(imResponse => {
							console.log('发送送礼物消息成功:', imResponse);
							this.$emit('change', '[礼物]')
						}).catch(imError => {
							console.log('发送送礼物消息失败:', imError);
						});
						uni.$emit('im-page', {
							type: 'send',
							data: {
								type: 'gift',
								msg: {
									giftName: this.giftData.list[this.giftIndex].name,
									url: this.giftData.list[this.giftIndex].file,
									svga: this.giftData.list[this.giftIndex].svga
								}
							}
						})
					}
				})
			}
		}
	}
</script>
<style>
	@charset "UTF-8";
	.uni-popup {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 998;
		overflow: hidden
	}

	.uni-popup__mask {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background: rgba(0, 0, 0, .4);
		opacity: 0
	}

	.uni-popup__mask.ani {
		transition: all .3s
	}

	.uni-popup__mask.uni-bottom,
	.uni-popup__mask.uni-center,
	.uni-popup__mask.uni-top {
		opacity: 1
	}

	.uni-popup__wrapper {
		position: absolute;
		z-index: 999;
		box-sizing: border-box
	}

	.uni-popup__wrapper.ani {
		transition: all .3s
	}

	.uni-popup__wrapper.top {
		top: 0;
		left: 0;
		width: 100%;
		transform: translateY(-100%)
	}

	.uni-popup__wrapper.bottom {
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translateY(100%)
	}

	.uni-popup__wrapper.center {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: scale(1.2);
		opacity: 0
	}

	.uni-popup__wrapper-box {
		position: relative;
		box-sizing: border-box
	}

	.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		padding: 30upx;
		background: #fff
	}

	.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
		position: relative;
		max-width: 80%;
		max-height: 80%;
		overflow-y: scroll
	}

	.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box,
	.uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {
		width: 100%;
		max-height: 500px;
		overflow-y: scroll
	}

	.uni-popup__wrapper.uni-bottom,
	.uni-popup__wrapper.uni-top {
		transform: translateY(0)
	}

	.uni-popup__wrapper.uni-center {
		transform: scale(1);
		opacity: 1
	}
	
	/* 礼物 */
	.gift-wrap {
		width: 100%;
		height: 600rpx;
		background-color: rgba(0,0,0,0.6);
	}
	.header-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		background-color: rgba(0,0,0,0.3);
	}
	.intro {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.strong {
		font-size: 30rpx;
		color: #fff;
		margin-right: 10rpx;
	}
	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		border-width: 2rpx;
		border-style: solid;
		border-color: #FF76A8;
		margin-right: 10rpx;
	}
	.tips {
		font-size: 24rpx;
		color: #979797;
	}
	.menu {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 120rpx;
		height: 50rpx;
		border-width: 2rpx;
		border-style: solid;
		border-color: #979797;
		border-radius: 50rpx;
	}
	.menu-data {
		font-size: 24rpx;
		color: #979797;
	}
	.main-wrap {
		width: 100%;
		height: 400rpx;
	}
	.gift-scroll-wrap {
		height: 400rpx;
	}
	.gift-list {
		display: flex;
		flex-wrap: wrap;
		padding-left: 15rpx;
		padding-right: 15rpx;
		padding-bottom: 100rpx;
	}
	.gift-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 176rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-width: 2rpx;
		border-style: solid;
		border-color: rgba(0,0,0,0);
		border-radius: 10rpx;
	}
	.active {
		border-color: #ED4574;
	}
	.gift-icon {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 10rpx;
	}
	.gift-info {
		 display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.gift-name {
		color: #fff;
		font-size: 26rpx;
		margin-bottom: -15rpx;
	}
	.gift-price {
		color: #fff;
		font-size: 20rpx;
	}
	.footer-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: rgba(0,0,0,0.3);
	}
	.balance-info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.balance {
		color: #fff;
		font-size: 26rpx;
	}
	.recharge-btn {
		color: #FF76A8;
		font-size: 26rpx;
		margin-left: 20rpx;
		/* text-decoration: underline; */
		border: 2rpx solid #FF76A8;
		padding: 0rpx 30rpx;
		border-radius: 7rpx;
	}
	.btn-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.giveGift-btn {
		margin-left: 10rpx;
	}
</style>